/**
 * @description: 折叠按钮
 * @param {*}
 * 
 */
import React,{useMemo} from "react";
import useIsDrak from '@/hooks/useIsDrak'
const CollpasedBtn:React.FC<{collapsed:boolean,setCollapsed:(collpsed:boolean)=>void}> = ({collapsed,setCollapsed}) => {
    const rotate = useMemo(()=>{
        return {
            rotate:135,
            translateX:`${collapsed? 0: 8}px`
        }
    },[collapsed])
    const left = useMemo(()=>{
        return collapsed? 0: 6
    },[collapsed])

    const isDark = useIsDrak()

    const pointClass = useMemo(()=>{
        return `w-2 h-[2px] ${isDark?'bg-[#FCFCFC]':'bg-[#313131]'} absolute top-[10px] left-0 origin-right transition-all duration-700`
    },[isDark])

    return <div 
    
    className={
        `
        rounded-full 
        top-16 -right-[13px] 
        w-6 h-6
        absolute z-10 cursor-pointer 
        transition-all duration-300 p-1 ${isDark? 'bg-[#313131]':'bg-[#FCFCFC]'}
        `
    } style={{border:'1px solid rgb(5,5,5,0.06)'}} onClick={()=>setCollapsed(!collapsed)}>
        <div className={pointClass} style={{transform:`rotate(${rotate.rotate}deg) translateX(${rotate.translateX})`,left: `${left}px`}}></div>
        <div className={pointClass} style={{transform:`rotate(-${rotate.rotate}deg) translateX(${rotate.translateX})`,left: `${left}px`}}></div>
    </div>

}

export default CollpasedBtn